<template>
  <div class="order">
    <!-- 我的订单头部 -->
    <div class="order-header">
      <div class="order-header-content">
        <h1>
          <i class="el-icon-s-order header-icon"></i>
          我的订单
        </h1>
        <div class="header-line"></div>
      </div>
    </div>
    <!-- 我的订单头部END -->

    <!-- 我的订单主要内容 -->
    <div class="order-content" v-if="orders.length>0">
      <el-card class="order-card" v-for="(item,index) in orders" :key="index" shadow="hover">
        <div slot="header" class="card-header">
          <div class="order-info">
            <span class="order-id">订单编号: {{item.data[0].order_id}}</span>
            <span class="order-time">{{item.data[0].order_time | dateFormat}}</span>
          </div>
          <div class="order-status-container">
            <div class="order-status">
              <span v-show="!item.isChangeStatus">
                <el-tag :type="getStatusTagType(item.data[0].status)" size="medium">
                  {{getStatusText(item.data[0].status)}}
                </el-tag>
              </span>
              <el-select v-show="item.isChangeStatus" v-model="orderStatus" placeholder="请选择" size="small" class="status-select">
                <el-option
                  v-for="opt in options"
                  :key="opt.id"
                  :label="opt.label"
                  :value="opt.value">
                </el-option>
              </el-select>
              <el-button v-show="item.isChangeStatus" size="small" @click="cancel(item)" class="status-btn">取消</el-button>
              <el-button v-show="item.isChangeStatus" size="small" type="primary" @click="suerStatus(item)" class="status-btn">确定</el-button>
              <el-button v-if="item.data[0].status == '1' || item.data[0].status == '2'" size="small" @click="changeOrderStatus(item)" class="edit-status-btn">
                <i class="el-icon-edit"></i>更改状态
              </el-button>
            </div>
          </div>
        </div>

        <div class="address-section">
          <div class="address-title">收件人信息</div>
          <div class="address-content">
            <div class="address-item">
              <span class="address-label">收件人:</span> 
              <span class="address-value">{{item.address.name}}</span>
            </div>
            <div class="address-item">
              <span class="address-label">手机号:</span> 
              <span class="address-value">{{item.address.phoneNum}}</span>
            </div>
            <div class="address-item">
              <span class="address-label">地址:</span> 
              <span class="address-value">{{item.address.content}}</span>
            </div>
          </div>
        </div>

        <div class="product-table">
          <div class="product-header">
            <div class="header-item product-img">商品</div>
            <div class="header-item product-name">名称</div>
            <div class="header-item product-price">单价</div>
            <div class="header-item product-num">数量</div>
            <div class="header-item product-total">小计</div>
          </div>

          <div class="product-item" v-for="(product,i) in item.data" :key="i">
            <div class="product-img">
              <router-link :to="{ path: '/goods/details', query: {productID:product.product_id} }">
                <el-image :src="$target + product.product_picture" fit="cover" class="product-image"></el-image>
              </router-link>
            </div>
            <div class="product-name">
              <router-link :to="{ path: '/goods/details', query: {productID:product.product_id} }" class="product-link">
                {{product.product_name}}
              </router-link>
            </div>
            <div class="product-price">{{product.product_price}}元</div>
            <div class="product-num">{{product.product_num}}</div>
            <div class="product-total">{{product.product_price*product.product_num}}元</div>
          </div>
        </div>

        <div class="order-summary">
          <div class="summary-left">
            <span class="total-text">
              共 <span class="total-num">{{total[index].totalNum}}</span> 件商品
            </span>
          </div>
          <div class="summary-right">
            <span class="total-price-text">合计：</span>
            <span class="total-price">{{total[index].totalPrice}}元</span>
          </div>
        </div>
      </el-card>
    </div>
    <!-- 我的订单主要内容END -->

    <!-- 订单为空的时候显示的内容 -->
    <div v-else class="order-empty">
      <el-card class="empty-card" shadow="never">
        <div class="empty-content">
          <div class="empty-image">
            <!-- <img src="../assets/imgs/empty-order.png" alt="空订单"> -->
          </div>
          <h2 class="empty-title">您的订单还是空的！</h2>
          <p class="empty-desc">快去购物吧！</p>
          <el-button type="primary" class="empty-btn" @click="$router.push('/')">
            去逛逛
          </el-button>
        </div>
      </el-card>
    </div>
    <!-- 订单为空的时候显示的内容END -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      orders: [], // 订单列表
      total: [], // 每个订单的商品数量及总价列表
      isChangeStatus: false,
      options: [],
      orderStatus: ''
    };
  },
  activated() {
    this.getList()
  },
  watch: {
    orders: function(val) {
      let total = [];
      for (let i = 0; i < val.length; i++) {
        const element = val[i];

        let totalNum = 0;
        let totalPrice = 0;
        for (let j = 0; j < element.data.length; j++) {
          const temp = element.data[j];
          totalNum += temp.product_num;
          totalPrice += temp.product_price * temp.product_num;
        }
        total.push({ totalNum, totalPrice });
      }
      this.total = total;
    }
  },
  methods: {
    getList() {
      this.$axios
        .post("/api/user/order/getOrder", {
          user_id: this.$store.getters.getUser.user_id
        })
        .then(res => {
          if (res.data.code === "001") {
            this.orders = res.data.orders;
            this.orders.forEach(item => {
              item.isChangeStatus = false
            })
          } else {
            this.notifyError(res.data.msg);
          }
        })
        .catch(err => {
          return Promise.reject(err);
        });
    },
    getStatusText(status) {
      const statusMap = {
        '1': '未发货',
        '2': '已发货',
        '3': '申请退款',
        '4': '订单关闭',
        '5': '交易完成',
        '6': '未发货'
      }
      return statusMap[status] || '未知状态'
    },
    getStatusTagType(status) {
      const typeMap = {
        '1': 'warning',
        '2': 'info',
        '3': 'danger',
        '4': '',
        '5': 'success',
        '6': 'warning'
      }
      return typeMap[status] || ''
    },
    cancel(item) {
      this.orderStatus = ''
      item.isChangeStatus = !item.isChangeStatus
    },
    suerStatus(item) {
      this.$axios.post('/api/user/order/changeStatus', {
        order_id: item.data[0].order_id,
        status: this.orderStatus
      })
        .then(res => {
          if (res.data.code == '001') {
            item.isChangeStatus = false
            this.getList()
            this.notifySucceed(res.data.msg)
          } else {
            this.notifyError(res.data.msg)
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    changeOrderStatus(item) {
      const status = item.data[0].status
      if (this.options.length != 0) {
        this.options = []
      } else {
        if (status == '1') {
          this.options = []
          this.options.push({
            label: '申请退款',
            value: '3'
          })
        }
        if (status == '2') {
          this.options = []
          this.options.push({
            label: '申请退款',
            value: '3'
          })
        }
      }
      item.isChangeStatus = !item.isChangeStatus
    }
  }
};
</script>

<style>
.order {
  max-width: 1280px;
  margin: 0 auto;
  padding: 20px;
  background-color: #f8f8f8;
}

/* 头部样式 */
.order-header {
  margin-bottom: 30px;
}

.order-header-content {
  position: relative;
  padding-bottom: 15px;
}

.order-header-content h1 {
  font-size: 28px;
  font-weight: 500;
  color: #333;
  margin: 0;
  display: flex;
  align-items: center;
}

.header-icon {
  color: #ff6700;
  margin-right: 10px;
  font-size: 32px;
}

.header-line {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 80px;
  height: 3px;
  background: linear-gradient(to right, #ff6700, #ff9d00);
  border-radius: 3px;
}

/* 订单卡片样式 */
.order-card {
  margin-bottom: 20px;
  border-radius: 8px;
  border: none;
  transition: all 0.3s ease;
}

.order-card:hover {
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

.el-card__header {
  background-color: #fafafa;
  border-bottom: 1px solid #eee;
  padding: 12px 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.order-info {
  display: flex;
  flex-direction: column;
}

.order-id {
  font-size: 15px;
  color: #666;
  margin-bottom: 5px;
}

.order-time {
  font-size: 13px;
  color: #999;
}

.order-status-container {
  display: flex;
  align-items: center;
}

.order-status {
  display: flex;
  align-items: center;
}

.status-select {
  width: 120px;
  margin-right: 10px;
}

.status-btn {
  margin-left: 8px;
}

.edit-status-btn {
  margin-left: 15px;
  color: #666;
  border-color: #ddd;
}

.edit-status-btn:hover {
  color: #ff6700;
  border-color: #ff6700;
}

/* 地址部分 */
.address-section {
  padding: 15px 20px;
  margin-bottom: 15px;
  background-color: #f9f9f9;
  border-radius: 4px;
}

.address-title {
  font-size: 14px;
  color: #666;
  margin-bottom: 10px;
  font-weight: 500;
}

.address-content {
  display: flex;
  flex-wrap: wrap;
}

.address-item {
  margin-right: 30px;
  font-size: 13px;
  color: #666;
}

.address-label {
  color: #999;
  margin-right: 5px;
}

.address-value {
  color: #333;
}

/* 商品表格 */
.product-table {
  border: 1px solid #eee;
  border-radius: 4px;
  overflow: hidden;
}

.product-header {
  display: flex;
  background-color: #f5f5f5;
  padding: 12px 0;
  font-size: 13px;
  color: #666;
  text-align: center;
}

.header-item {
  flex: 1;
}

.product-img {
  flex: 0 0 120px;
}

.product-name {
  flex: 3;
  text-align: left;
  padding-left: 20px;
}

.product-item {
  display: flex;
  align-items: center;
  padding: 15px 0;
  border-bottom: 1px solid #eee;
  text-align: center;
}

.product-item:last-child {
  border-bottom: none;
}

.product-image {
  width: 80px;
  height: 80px;
  border-radius: 4px;
  transition: all 0.3s ease;
}

.product-image:hover {
  transform: scale(1.05);
}

.product-link {
  color: #333;
  transition: color 0.2s;
}

.product-link:hover {
  color: #ff6700;
  text-decoration: underline;
}

.product-price, 
.product-num,
.product-total {
  flex: 1;
  color: #666;
}

.product-total {
  color: #ff6700;
  font-weight: 500;
}

/* 订单汇总 */
.order-summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  margin-top: 20px;
  background-color: #f9f9f9;
  border-radius: 4px;
}

.total-text {
  font-size: 14px;
  color: #666;
}

.total-num {
  color: #ff6700;
  font-weight: 500;
}

.total-price-text {
  font-size: 14px;
  color: #666;
}

.total-price {
  font-size: 22px;
  color: #ff6700;
  font-weight: 600;
}

/* 空订单样式 */
.empty-card {
  border: none;
  background-color: transparent;
}

.empty-card .el-card__body {
  padding: 40px 0;
}

.empty-content {
  text-align: center;
}

.empty-image {
  margin-bottom: 20px;
}

.empty-image img {
  width: 200px;
  height: auto;
  opacity: 0.8;
}

.empty-title {
  font-size: 22px;
  color: #666;
  margin-bottom: 10px;
  font-weight: normal;
}

.empty-desc {
  font-size: 14px;
  color: #999;
  margin-bottom: 25px;
}

.empty-btn {
  padding: 10px 30px;
  border-radius: 20px;
  background: linear-gradient(to right, #ff6700, #ff9d00);
  border: none;
  font-size: 14px;
}

.empty-btn:hover {
  opacity: 0.9;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(255, 103, 0, 0.3);
}
</style>